<template>
  <div class="task-list">
    <!-- 任务清单卡片 -->
    <el-card class="task-card">
      <div slot="header">
        <h2>员工任务清单</h2>
      </div>
      <!-- 任务表单 -->
      <div class="task-form">
        <el-form :model="task" :rules="rules" ref="taskForm" label-width="80px">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="task.name"></el-input>
          </el-form-item>
          <el-form-item label="任务状态" prop="status">
            <el-radio-group v-model="task.status">
              <el-radio label="未完成">未完成</el-radio>
              <el-radio label="进行中">进行中</el-radio>
              <el-radio label="已完成">已完成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <!-- 添加任务按钮 -->
            <el-button type="primary" @click="addTask">添加任务</el-button>
            <!-- 重置表单按钮 -->
            <el-button type="warning" @click="resetForm">重置表单</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 任务列表 -->
      <div class="task-table">
        <el-table :data="taskList" >
          <el-table-column prop="name" label="任务名称"></el-table-column>
          <el-table-column prop="status" label="任务状态"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <!-- 编辑任务按钮 -->
              <el-button type="primary" size="small" @click="editTask(row)">编辑</el-button>
              <!-- 删除任务按钮 -->
              <el-button type="danger" size="small" @click="deleteTask(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

  
  <script>
  import { reactive, ref } from 'vue';
  import { ElForm, ElFormItem, ElInput, ElRadio, ElRadioGroup, ElButton, ElTable, ElTableColumn, ElCard } from 'element-plus';
  
  export default {
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElRadio,
      ElRadioGroup,
      ElButton,
      ElTable,
      ElTableColumn,
      ElCard,
    },
    setup() {
      // 使用reactive定义响应式数据
      const task = reactive({
        name: '',
        status: '未完成',
      });
  
      const taskList = reactive([
        {
          name: '任务1',
          status: '未完成',
        },
        {
          name: '任务2',
          status: '进行中',
        },
        {
          name: '任务3',
          status: '已完成',
        },
      ]);
  
      // 定义表单验证规则
      const rules = {
        name: [
          { required: true, message: '请输入任务名称', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择任务状态', trigger: 'change' },
        ],
      };
  
      // 使用ref创建表单的引用
      const taskForm = ref(null);
  
      // 添加任务函数
      const addTask = () => {
        // 调用表单验证方法
        taskForm.value.validate((valid) => {
          if (valid) {
            if (taskList.length >= 8) {
              // 如果已经达到任务上限，则弹出提示
              alert('已到达任务设置上限，请先完成前面的任务再继续添加吧');
            } else {
              // 将新任务添加到任务列表
              taskList.push({ ...task });
              // 重置表单
              resetForm();
            }
          }
        });
      };
  
      // 编辑任务函数
      const editTask = (row) => {
        // 将选中的任务赋值给表单
        task.name = row.name;
        task.status = row.status;
        // 删除该任务
        deleteTask(row);
      };
  
      // 删除任务函数
      const deleteTask = (row) => {
        const index = taskList.indexOf(row);
        taskList.splice(index, 1);
      };
  
      // 重置表单函数
      const resetForm = () => { 
        taskForm.value.resetFields();
        task.name = '';
        task.status = '未完成';
      };
  
      return {
        task,
        taskList,
        rules,
        taskForm,
        addTask,
        editTask,
        deleteTask,
        resetForm,
      };
    },
  };
  </script>
  
  <style scoped>
  
  .task-list {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .task-card {
    margin-top: 20px;
  }
  
  .task-form {
    padding: 20px;
  }
  
  .task-table {
    margin-top: 20px;
  }
  </style>
  